
<template>
  <div class="myinput">
    <slot name="left" class="left"></slot>
    <input
      :type="type"
      :placeholder="placeholder"
      @input="handler_inp"
      :[border_color]="{ success: flag, error: !flag }"
      @blur="handlerblur"
      v-model="name"
    />
  </div>
</template>

<script>
export default {
  props: {
    rules: {
      type: RegExp,
    },
    placeholder: {
      type: String,
    },
    type: {
      type: String,
    },
    msg: {
      type: String,
      default: "输入数据有误",
    },
  },
  methods: {
    handler_inp(e) {
      // console.log(e);
      // console.log(e.target);  //父组件中的输入框字节
      let a = e.target.value;

      if (this.rules) {
        if (this.rules.test(a)) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      }
      this.$emit("input", a);
    },

    handlerblur(e) {
      this.border_color = "class";
      if (this.rules) {
        let a = e.target.value;
        if (!this.rules.test(a) && this.onoff) {
          this.$toast({
            message: this.msg, 
            duration: 0.8, //提示框显示时间
            position: "top", //提示框显示位置
          });
          this.onoff = false;
        }
      }
    },
  },
  data() {
    return {
      flag: true,
      border_color: "",
      onoff: false,
      name: "",
    };
  },
  watch: {
    name(n, o) {
      // console.log(n, o);
      if (n == o) {
        this.onoff = false;
      } else {
        this.onoff = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  position: absolute;
  left: 5px;
}
.myinput {
  padding: 0 20 0 0px;
  width: 90%;
  position: relative;
  display: flex;
  border-bottom: 1px solid #999;
  span {
    margin-top: 6px;
  }
  input {
    outline: none;
    border: none;
    height: 25px;
    width: 100%;
    font-size: 18px;
    line-height: 25px;
  }
}
input::-webkit-input-placeholder {
  color: #dfdfe9;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #dfdfe9;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #dfdfe9;
}
input:-ms-input-placeholder {
  color: #dfdfe9;
}
.success {
  border-bottom-color: BBBBBB;
}
.error {
  border-bottom-color: red;
  color: red;
}
</style>